<template>
	<view>
		<view class="address_container f-nw">
		    <view class="address-icon-wrap">
		        <van-icon name="location-o" />
		    </view>
		    <view class="address-context f-g-1">
		        <view class="f-nw f-j-b">
		              <view>收货人：{{order_details.receiver_name}}</view>
		              <view class="address-phone">{{order_details.receiver_phone}}</view>
		        </view>
		        <view class="address-address">收货地址：{{order_details.receiver_address}}</view>
		    </view>
		</view>
		
		<!-- 商品 -->
		<view class="commodity-container">
		    <block v-for="(item,index) in order_details.list" :key="index">
		        <view class="commodity-item f-nw" catchtap="to_commodity" >
		            <view class="commodity-item-img-wrap f-s-0">
		                <image class="img-100" mode="aspectFill" :src="item.goods_spec_img"></image>
		            </view>
		            <view class="commodity-item-details">
		                <view class="commodity-item-name w-100 t-overflow-clamp">{{item.goods_name}}</view>
		                <view class="commodity-item-guige w-100 t-overflow-clamp-1">{{item.goods_spec_name}}</view>
		                <view class="commodity-item-price-num w-100 f-nw f-j-b">
		                    <view class="commodity-item-price">￥{{item.goods_price}} <text style="color:black;">x{{item.nums||1}}</text> </view>
		                </view>
		            </view>
		        </view>            
		    </block>
		    <view class="commodity-sum">
		        <view> <text class="commodity-sum-all">共 {{total_number_of_goods}} 件商品</text> <text>小计：<text class="commodity-sum-price">￥{{total_price_of_goods}}</text> </text>  </view>
		    </view>
		</view>
		
		<view class="discounts-container">
		    <view>订单优惠</view>
		</view>
		<view class="buyer-message f-nw f-a-c">
		    <view>买家留言</view>
		    <view class="input-wrap f-g-1">
		        <input disabled :value="order_details.message"></input>
		    </view>
		</view>
		<view class="order-information" vif="!commodity_list">
		    <view class="order-id f-j-b">
		        <text>订单编号</text> <text>{{order_details.list[0].order_id}}</text>
		    </view>
		    <view class="order-id f-j-b"  catchtap="copy_courier_number" v-if="order_details.status==3||order_details.status==4&&order_details.courier_number">
		        <text>快递单号</text> <text>{{order_details.courier_number}}</text>
		    </view>
		    <view class="order-create-time f-j-b">
		        <text>创建时间</text> <text>{{order_details.add_time}}</text>
		    </view>
		    <view class="order-price f-j-b" v-if="order_details.courier_number">
		        <text>快递单号</text> <text>{{order_details.courier_number}}</text>
		    </view>
		    <view class="order-price f-j-b" v-if="order_details.courier_company">
		        <text>物流</text> <text>{{order_details.courier_company}}</text>
		    </view>
		    <view class="order-price f-j-b" v-if="order_details.express">
		        <text>快递费</text> <text>￥{{order_details.express}}</text>
		    </view>
		    <view class="order-price f-j-b" v-if="order_details.discount_price&&order_details.discount_price!='0.00'">
		        <text>优惠价/商家补价</text> <text>￥{{order_details.discount_price}}</text>
		    </view>
		    <view class="order-price f-j-b">
		        <text>商品总价</text> <text>￥{{total_price_of_goods}}</text>
		    </view>
		    <view class="order-price f-j-b">
		        <text></text> <text>总计：<text class="commodity-sum-price">￥{{order_details.moeny}}</text></text>
		    </view>
		    <view class="order-operation f-nw f-j-e">
		        <view class="cancel-order" @click="Orderindexorder_cancel"  v-if="order_details.status==1">取消</view>
		        <view class="pay" catchtap="orderindexorder_supplement"  v-if="order_details.status==1">支付</view>
		        <view class="confirm-shouhuo" catchtap="confirm_shouhuo"  v-if="order_details.status==3">确认收货</view>
		    </view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                total_price_of_goods: 1,
				order_details: {},
                total_number_of_goods: 1,
                total_price_of_goods: 1,
                commodity_list: false,
			}
		},
		methods: {
			Orderindexorder_cancel(){
			  uni.showModal({
			    title: '提示',
			    content: '确定取消订单?',
			    success: showModal_res=>{
			      if (showModal_res.confirm){
                      this.$api.cancel({
			              f_order_id: this.order_details.f_order_id,
			              admin_id: this.order_details.admin_id
			            }).then(res=>{
                            uni.showToast({
                                icon: "none",
                                title: "取消成功"
                            })
                          this.getOrderDetails(this.order_details.f_order_id)
                      })
			      }
			    }
			  })
			},
            getOrderDetails(id) {
                this.$api.getOrderDetails({f_order_id: id,uid: true},{loading: true}).then(res=>{
                    this.order_details = res.data;
                    this.total_number_of_goods = res.data.list.reduce((a, b) => {return Number(a) + Number(b.nums)},0),
                    this.total_price_of_goods = res.data.list.reduce((a, b) => { return Number(a) + Number(b.goods_price * b.nums) }, 0)
                })
            }
		},
        onLoad({id}) {
            this.getOrderDetails(id)
        }
	}
</script>

<style>
    .img-100 {
        width: 80px;
        height: 80px;
    }
/* pages/order/orderDetails/orderDetails.wxss */
page{
  background-color: #F7F7F7
}
.steps .van-step__title{
  text-align: center
}
.steps-cancel .van-step__title{
   text-align: center;
   color: #999
}

.steps-container{
  background-color: #fff
}
.steps-container-cancel{
  width: 60%;
  margin: 0 auto;
}
.count-down{
  padding: 20rpx;
  margin-top: 20rpx;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 28rpx
}
.count-down text{
  margin-right: 20rpx
}
/* 地址 */
.address_container{
  margin-top: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  box-sizing: border-box;
  align-items: flex-start
}
.address-icon-wrap{
  font-size: 60rpx;
  color: #999;
  margin-right: 20rpx;
}
.address_container .address-context{
  font-size: 28rpx;
  color: #333
}
.address_container .address-address{
  font-size: 24rpx;
  color: #999;
  margin-top: 12rpx
}
.address-phone{
  font-size: 26rpx;
  color: #999
}
.to_address{
  font-size: 28rpx;
  color: #666
}
/* 商品 */
.commodity-container{
  margin-top: 10px;
  background-color: #fff
}
.commodity-item{
  padding: 20rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #eeeeee
}
.commodity-item-img-wrap{
    width: 160rpx;
    height: 160rpx;
    margin-right: 20rpx
}
.commodity-item-num{
  border-radius: 30px;
  border: 1px solid red;
  text-align: center;
  padding:10rpx 20rpx;
  color: red;
  font-size: 21rpx;
}
.commodity-item-details{
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
  font-size: 28rpx;
  color: #333
}
.commodity-item-guige{
  font-size: 24rpx;
  color: #999
}
.commodity-item-price-num{
  font-size: 26rpx
}
.commodity-item-price{
  color: var(--theme)
}

/* 共计 */
.commodity-sum{
  font-size: 26rpx;
  padding: 20rpx;
  padding-top: 0;
  display: flex;
  justify-content: flex-end
}
.commodity-sum-all{
  color: #999;
  margin-right: 20rpx;
  font-size: 24rpx
}
.commodity-sum-price{
  color: var(--theme)
}
.discounts-container{
  margin-top: 20rpx
}
.discounts-container,.buyer-message{
  font-size: 26rpx;
  color: #666;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  margin-bottom: 2rpx
}

.order-information{
  padding: 10rpx 0;
  font-size: 26rpx;
  color: #666;
  background-color: #fff
}
.order-information>view{
  padding:10rpx 20rpx;
  box-sizing: border-box
}
.input-wrap{
  margin-left: 20rpx
}
.input-wrap>input{
  width: 100%
}

/* 支付 */
.order-operation >view{
  color: #fff;
  background-color: var(--theme);
  height: 56rpx;
  line-height: 56rpx;
  border-radius: 46rpx;
  font-size: 28rpx;
  padding: 0 48rpx;
  margin-left: 20rpx;
  width: max-content;
}
.order-operation .cancel-order{
  color: #666;
  border: 1rpx solid #666;
  box-sizing: border-box;
  background-color: #fff
}
.order-operation .confirm-shouhuo{
  border: 1rpx solid var(--theme);
  color: var(--theme);
  background-color: #fff
}
</style>
